
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%-- imports --%>
<%@page import="com.dilean.api.dao.AttributeTypeDAO"%>
<%@page import="com.dilean.impl.model.AttributeTypeImpl"%>
<%@page import="com.dilean.api.model.AttributeType"%>
<%@page import="com.dilean.spring.AplicationContextHolder"%>
<%@page import="com.dilean.api.dao.PersonDAO"%>
<%@page import="com.dilean.impl.model.PersonImpl"%>
<%@page import="com.dilean.api.model.Person"%>
<%@page import="com.dilean.api.model.Person"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueDate"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueList"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueText"%>
<%@page import="java.util.Collection"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Friends &middot; Dilean</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS and other resourses -->
        <link href="resources/mytheme/css/bootstrap.min.css" rel="stylesheet">
        <link href="resources/mytheme/css/simple-sidebar.css" rel="stylesheet">
        <script src="resources/mytheme/js/friendsDropdown.js"></script>
        <link href="resources/mytheme/css/font-awesome.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.min.css" rel="stylesheet">
        <script src="resources/mytheme/js/jquery-1.11.0.js"></script>
        <script src="resources/mytheme/js/bootstrap.min.js"></script>
    </head>
    <body>
        <%
            Person me = new PersonImpl();
            final int myId = Integer.parseInt(request.getParameter("id"));
            me = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(myId);
            Collection<Person> friends = me.getFriends();
            Collection<Person> friendRequests = me.getFriendRequests();

            AttrValueText firstName;
            AttrValueText lastName;
            AttrValueText status;
            AttrValueList gender;
            AttrValueList relStatus;
            AttrValueList univercity;
            AttrValueDate birthData;
            int numberRequest = 0;
            for (Person fr : friendRequests) {
                if (friends.contains(fr) == false) {
                    numberRequest++;
                }
            }

        %>





        <div id="wrapper">

            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="http://localhost:8080/Dilean/myPage.jsp">
                            <h2 align="centre" >Dilean</h2>
                        </a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/myPage.jsp"><i class="fa fa-home fa-fw-5x"></i>&nbsp; My Page</a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/friends.jsp?id=1"><i class="fa fa-users"></i>&nbsp; Friends </a>
                    </li>

                    <li>
                        <a href="http://localhost:8080/Dilean/allUsers.jsp?id=1"><i class="fa fa-database"></i>&nbsp; Users 
                            <%                                if (numberRequest != 0) {
                            %>
                            <span class="badge badge-info"><%=numberRequest%> </span>
                            <%
                                }
                            %>
                        </a>
                    </li>



                    <li>
                        <a href="http://localhost:8080/Dilean/conversation.jsp"><i class="fa fa-envelope"></i>&nbsp; Messages </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="http://localhost:8080/Dilean/editUser.jsp?id=1"><i class="fa fa-cog"></i>&nbsp; Settings</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-book"></i>&nbsp; About</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sign-out"></i>&nbsp; LogOut</a>
                    </li>

                </ul>
            </div>
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-large btn-primary" href="#menu-toggle" id="menu-toggle" >
                                <i class="fa fa-user fa-3x"></i> <h4>User Menu</h4></a>
                            <br><br>

                            <div class="container">
                                <div class="well col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
                                    <!-- -->


                                    <% for (Person friend : friends) {
                                            int id = friend.getId();
                                            firstName = friend.getAttributeValue(1, AttrValueText.class);
                                            lastName = friend.getAttributeValue(2, AttrValueText.class);
                                            status = friend.getAttributeValue(5, AttrValueText.class);
                                            gender = friend.getAttributeValue(6, AttrValueList.class);;
                                            relStatus = friend.getAttributeValue(7, AttrValueList.class);
                                            univercity = friend.getAttributeValue(9, AttrValueList.class);
                                            birthData = friend.getAttributeValue(10, AttrValueDate.class);

                                            String fullname = "User #" + id;

                                            if ((firstName != null) && (lastName != null)) {
                                                fullname = firstName.getValue() + " " + lastName.getValue();
                                            } else if ((firstName == null) && (lastName != null)) {
                                                fullname = lastName.getValue();
                                            } else if ((firstName != null) && (lastName == null)) {
                                                fullname = firstName.getValue();
                                            }
                                    %>

                                    <div class="row user-row">
                                        <div class="col-xs-3 col-sm-2 col-md-1 col-lg-1">
                                            <img class="img-circle"
                                                 src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
                                                 alt="User Pic">
                                        </div>
                                        <div class="col-xs-8 col-sm-9 col-md-10 col-lg-10">
                                            <strong><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=id%>"><%= fullname%></a></strong><br>
                                            <span class="text-muted"><%= status.getValue()%></span>
                                        </div>
                                        <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".cyruxx">
                                            <i class="glyphicon glyphicon-chevron-down text-muted"></i>
                                        </div>
                                    </div>
                                    <!-- -->
                                    <div class="row user-infos cyruxx">
                                        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xs-offset-0 col-sm-offset-0 col-md-offset-1 col-lg-offset-1">
                                            <div class="panel panel-primary">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">User information</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div class="col-md-3 col-lg-3 hidden-xs hidden-sm">
                                                            <img class="img-circle"
                                                                 src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100"
                                                                 alt="User Pic">
                                                        </div>
                                                        <div class="col-xs-2 col-sm-2 hidden-md hidden-lg">
                                                            <img class="img-circle"
                                                                 src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=50"
                                                                 alt="User Pic">
                                                        </div>

                                                        <div class=" col-md-9 col-lg-9 hidden-xs hidden-sm">
                                                            <strong><%= fullname%></strong><br>
                                                            <table class="table table-user-information">
                                                                <tbody>

                                                                    <%
                                                                        if (gender != null) {
                                                                    %>
                                                                    <tr>
                                                                        <th><h5>Gender</h5></th>
                                                                <th><h5><%= gender.getValue().getName()%></h5></th>
                                                                </tr>
                                                                <% }

                                                                    if (relStatus != null) {
                                                                %>
                                                                <tr>
                                                                    <th><h5>Relationship Status</h5></th>
                                                                <th><h5><%= relStatus.getValue().getName()%></h5></th>
                                                                    <% }
                                                                        if (univercity != null) {
                                                                    %>
                                                                <tr>
                                                                    <th><h5>Univercity</h5></th>
                                                                <th><h5><%= univercity.getValue().getName()%></h5></th>
                                                                </tr>
                                                                <% }
                                                                    if (birthData != null) {
                                                                %>
                                                                <tr>
                                                                    <th><h5>Birth Day</h5></th>
                                                                <th><h5><%= birthData.getDataStr()%></h5></th>
                                                                </tr>
                                                                <% }
                                                                %>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel-footer">

                                                    <div class="btn-group btn-group-justified">

                                                        <a class="btn btn-primary" href="http://localhost:8080/Dilean/friend.jsp?id=<%= id%>"><i class="fa fa-user fa-fw"></i> User</a>

                                                        <a class="btn btn-primary" href="#"><i class="fa fa-envelope-o fa-fw"></i> Message</a>
                                                        <a class="btn btn-primary" href="http://localhost:8080/Dilean/friends.jsp?id=<%= id%>"><i class="fa fa-users"></i> Friends</a>
                                                        <a class="btn btn-primary" href="http://localhost:8080/Dilean/commonDileanUsers.jsp?myId=<%=myId %>&frId=<%=id %>"><i class="fa fa-info"></i> Common</a>
                                                        <a href="http://localhost:8080/Dilean/friendsRequestAction.jsp?id=<%=myId%>&par=4&frid=<%=id%>" class="btn btn-danger"><i class="fa fa-trash-o"></i>&nbsp; Delite</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- -->
                                    <%                                             }
                                    %>
                                </div>
                            </div>
                        </div>
                        <script>
                            $("#menu-toggle").click(function(e) {
                                e.preventDefault();
                                $("#wrapper").toggleClass("toggled");
                            });
                            $(document).ready(function() {
                                var panels = $('.user-infos');
                                var panelsButton = $('.dropdown-user');
                                panels.hide();
                                //Click dropdown
                                panelsButton.click(function() {
                                    //get data-for attribute
                                    var dataFor = $(this).attr('data-for');
                                    var idFor = $(dataFor);
                                    //current button
                                    var currentButton = $(this);
                                    idFor.slideToggle(400, function() {
                                        //Completed slidetoggle
                                        if (idFor.is(':visible'))
                                        {
                                            currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
                                        }
                                        else
                                        {
                                            currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
                                        }
                                    })
                                });
                                $('[data-toggle="tooltip"]').tooltip();

                                $('button').click(function(e) {
                                    e.preventDefault();
                                    alert("This is a demo.\n :-)");
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
